<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加品牌</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div style="margin: 15px;padding: 15px;background-color: #fff;">
        <div class="layui-form">
            <input type="hidden" name="id" value="{$row['id']}">
            <div class="layui-form-item">
                <label class="layui-form-label">所属类目</label>
                <!-- 无限层级联动下拉框 -->
                <div id="cid">
                    <!-- 默认联动 -->
                    {foreach $parents as $key => $parent}
                    <div class="layui-input-inline">
                        <select name="cid[{$parent['pid']}]" lay-filter="filter-cate" {if $key==0}lay-verify="required"
                            {/if} lay-search="">
                            <option></option>
                            {foreach $parent['siblings'] as $cate}
                            <option value="{$cate['id']}" {if $cate['id']==$parent['id']} selected{/if}>{$cate['title']}
                            </option>
                            {/foreach}
                        </select>
                    </div>
                    {/foreach}
                    <!-- 下级联动 -->
                    {if $next}
                    <div class="layui-input-inline">
                        <select name="cid[{$parent['pid'] + 1}]" lay-filter="filter-cate" lay-search="">
                            <option></option>
                            {foreach $next as $cate}
                            <option value="{$cate['id']}">{$cate['title']}
                            </option>
                            {/foreach}
                        </select>
                    </div>
                    {/if}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">属性名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="{$row['title']}" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.use(['form'], function () {
            var form = layui.form
                , $ = layui.jquery;

            // 保存
            form.on('submit(save)', function (data) {
                $.post('/admins/products/save_edit_property_name', data.field, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(() => parent.window.location.reload(), 1000);
                }, 'json');
            });

            // ajax无限级联动
            form.on('select(filter-cate)', function (obj) {
                // 重选移除原来的层级
                $(obj.othis).parent().nextAll().remove();
                // 重选生成下级联动
                var pid = obj.value;
                pid && $.get('/admins/products/edit_property_name', { pid }, function (res) {
                    if (res.code) return layer.msg(res.msg);
                    if (res.data && res.data.length) {
                        html = '<div class="layui-input-inline">';
                        html += '<select name="cid[' + pid + ']" lay-filter="filter-cate" lay-search="">';
                        html += '<option></option>';
                        res.data.forEach(el => html += '<option value="' + el.id + '">' + el.title + '</option>');
                        html += '</select>';
                        html += '</div>';
                        document.getElementById('cid').insertAdjacentHTML('beforeend', html);
                        form.render('select');
                    }
                }, 'json');
            })
        });
    </script>
</body>

</html>